<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script src="js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/list.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		<link rel="stylesheet" type="text/css" href="css/iconfont.css"/>
		<title></title>
	</head>
	<body class="bg-idx">
		<div class='header'>
		<a href="javascript:history.go(-1);" class="icon iconfont icon-left"></a>
				<h3 class="title">六芝园商城</h3>
				<a class="icon iconfont icon-fangdajing"></a>
	</div>
	<div class="content pbt0 good-list">
		<div class="good-sx">
			<a href="" class="active">综合排序</a>
			<a href="">价格升序</a>
			<a href="">价格降序</a>
			<div >
					<span>更多分类</span>
					<ul >
						<li><a href="">男装</a></li>
						<li><a href="">男装</a></li>
						<li><a href="">男装</a></li>
						<li><a href="">男装</a></li>
						<li><a href="">男装</a></li>
						<li><a href="">男装</a></li>
					</ul>
				
			</div>
		</div>
		<div class="good-item">
			<ul>
				
				<!--<li>
					<a href="">
						<img src="img/index/homepage7_03.png"/>
					</a>
					<h3><a href="">商品名称</a></h3>
					<h4>¥100<<span></span></h4>
				</li>-->
			</ul>
		</div>
	</div>
	<script type="text/javascript">
		function creatLi(){
			var str = '';
			for(var i = 0;i<10;i++){
				var h = parseInt(Math.random()*200)+100;
				str += '<li>'
					+'<a href="">'
						+'<img src="img/index/homepage7_03.png"/>'
					+'</a>'
					+'<h3><a href="">商品名称</a></h3>'
					+'<h4>¥100<span></span></h4>'
					+'<a class="icon-icon icon iconfont"></a>'
				+'</li>'
			}
			 $(".good-item ul").append(str)
			 setPos();
		}
		creatLi();
		function setPos(){
			var top   //元素的高度
			var left
			var wwidth = $(window).innerWidth();
			var liwidth = (wwidth-30)/2    		
			var saveHeight = [];
			for(var i = 0;i < $(".good-item ul li").length;i++){
				var item = $(".good-item ul li")[i];
				var itemHeight = $(item).height()
				console.log(itemHeight)
				for(var k = 0;k<2;k++){
					if(i<2){
						saveHeight.push(itemHeight)
						$(item).css("top",'0px');
						if(i==0){
							$(item).css("left",'0px')
						}else{
							$(item).css("left",(liwidth+20)+'px')
						}
					}else{
						if(saveHeight[0]>saveHeight[1]) {
							top = saveHeight[1] + 10
							$(item).css("top",top+'px');
							$(item).css("left",(liwidth+20)+'px')
							saveHeight[1] = saveHeight[1] + itemHeight +10;
					}else{
							top = saveHeight[0] + 10
							$(item).css("top",top+'px');
							$(item).css("left",'0px');
							saveHeight[0] = saveHeight[0] + itemHeight + 10;
					}
				}
			}
				
				if(saveHeight[0]>saveHeight[1]){
					$(".good-item ul").height(saveHeight[0]+15)
				}else{
					$(".good-item ul").height(saveHeight[1]+15)
				}
				//for循环结束，判断数组高低，将高的那个值付给ul用于页面滚动处理
		  }	
			//	return top;
		}
		$(window).scroll(function(){
			var wh = $(window).innerHeight()	//获取屏幕高度
			var dh = $(document).height()		//文档高度
			var st = $(window).scrollTop();		//滚动出去的距离
			if(dh-(wh+st)<30){
				creatLi();
			}
		})
		$(".header .title").click(function(){
			$("html,body").animate({scrollTop:0},200)
		})
		//setPos()
	</script>
	</body>
</html>
